<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <search />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in banner" :key="index">
        <img :src="item" alt="img" />
      </van-swipe-item>
    </van-swipe>
    <van-grid column-num="4" clickable>
      <van-grid-item @click="$router.push(`/searchlist?key=${item.name}`)" v-for="item in recommended" :key="item.id">
        <svg class="icon" aria-hidden="true">
          <use :href="item.icon"></use>
        </svg>
        <span style="padding-top: 4px;">{{item.name}}</span>
      </van-grid-item>
    </van-grid>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="20">
      <slidebar :items="goods" @data="getActive" />
    </van-list>
    <tabbar />
    <goup />
  </van-pull-refresh>
</template>

<script>
import Tabbar from '@components/Tabbar'
import Search from '@components/Search'
import Slidebar from './components/Slidebar'
import Goup from '@components/GoTop'
import {
  getHomegood,
  getIcon
} from '@api/home'
export default {
  data () {
    return {
      banner: ['https://img02.hua.com/slider/18_youflower_m.jpg', 'https://img02.hua.com/slider/21_byz_banner_m.jpg',
        'https://img02.hua.com/slider/21_birthday_banner_m.jpg'
      ],
      recommended: [],
      isLoading: false,
      goods: {
        sales: {
          page: 1,
          size: 4,
          list: []
        },
        recommend: {
          page: 1,
          list: []
        },
        new: {
          page: 1,
          list: []
        }
      },
      loading: false,
      finished: false,
      activedata: 0,
      model: ''
    }
  },
  created () {
    this.getHomegood()
    this.getIcon()
  },
  methods: {
    // ok
    getIcon () {
      getIcon().then((res) => {
        if (res.data.code === 200) {
          this.recommended = res.data.data
        }
      })
    },
    getActive (active) {
      this.finished = false
      this.activedata = active
    },
    onRefresh () {
      this.goods = {
        sales: {
          page: 1,
          size: 4,
          list: []
        }
      }
      this.isLoading = false
      this.finished = false
      this.getHomegood()
    },
    onLoad () {
      switch (this.activedata) {
        case 0:
          this.model = 'sales'
          break
      }
      this.goods[this.model].page++
      getHomegood(this.model, this.goods[this.model]).then((res) => {
        if (!res.data.data.length) {
          this.finished = true
        } else {
          if (res.data.code === 200) {
            this.goods[this.model].list = [...this.goods[this.model].list, ...res.data.data]
          }
        }
        this.loading = false
      })
    },
    getHomegood () {
      getHomegood('sales', this.goods.sales).then((res) => {
        if (res.data.code === 200) {
          this.goods.sales.list = res.data.data
          this.isLoading = false
        }
      })
    }
  },
  components: {
    Tabbar,
    Search,
    Slidebar,
    Goup
  }
}
</script>

<style lang="scss" scoped>
  .my-swipe .van-swipe-item {
    margin-top: 54px;
    left: 0;
    color: #fff;
    text-align: center;

    img {
      width: 100%;
    }
  }

  .van-icon {
    width: 50px;
    height: 50px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  /deep/ .van-list__loading{
    margin-bottom: 50px;
  }
  /deep/ .van-list__finished-text{
    margin-bottom: 50px;
  }
</style>
